<template>
  <div class="my">
    <header>
      <h4>个人中心</h4>
    </header>
    <section>
      <div class="user">
        <img src="../../static/images/my/image.png" alt="" />
        <div class="text">昵称 {{ nickName }}</div>
        <p>免费账号</p>
        <button>
          <span class="star"></span>
          切换高级
        </button>
      </div>
    </section>
    <section>
      <ul>
        <li v-for="(item, index) in arr" :key="item.id">
          <router-link :to="{ path: item.path }">
            <div>
              <img :src="item.src" alt="" />
              <span>{{ item.text }}</span>
            </div>
            <div>
              <span class="icon"></span>
            </div>
          </router-link>
          <div class="line" v-if="index == 2"></div>
        </li>
      </ul>
      <p class="version">Version 1.0.0</p>
      <div style="padding-bottom: 100px"></div>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        {
          path: "/login",
          src: require("../../static/images/my/1.png"),
          text: "账号",
          text_en: "Account",
          id: "1",
        },
        {
          path: "/login",
          src: require("../../static/images/my/2.png"),
          text: "播放",
          text_en: "Playback",
          id: "2",
        },
        {
          path: "/login",
          src: require("../../static/images/my/3.png"),
          text: "下载",
          text_en: "Download",
          id: "3",
        },
        {
          path: "/login",
          src: require("../../static/images/my/4.png"),
          text: "关于我们",
          text_en: "About Us",
          id: "4",
        },
        {
          path: "/login",
          src: require("../../static/images/my/5.png"),
          text: "帮助中心",
          text_en: "Help Center",
          id: "5",
        },
      ],
      nickName: "",
    };
  },
  created() {
    //初始化
    let nickName = localStorage.getItem("NICKNAME");
    this.nickName = nickName;
  },
  //组件内置路由守卫
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    let auto_token = localStorage.getItem("_TOKEN");
    if (auto_token) {
      // 有token就访问该组件
      next();
    } else {
      if (confirm("需要登录才能继续访问")) {
        next({ path: "/login" });
      }
    }
  },
};
</script>

<style lang="less">
@import "@/static/less/variable.less";

.line {
  width: 100%;
  height: 1px;
  margin: 10px 0;
  background-color: #ccc;
  transform: scaleY(0.5);
}
.version {
  text-align: center;
  color: #666;
  font-size: 14px;
}
.my {
  padding: @pad;

  header {
    height: 60px;
    display: flex;
    align-items: center;

    h4 {
      font-weight: normal;
      font-size: 20px;
    }
  }

  section {
    .user {
      text-align: center;
      padding: 20px 0;
    }

    img {
      width: 100px;
    }

    .text {
      font-size: 17px;
      color: #000;
      margin-top: 10px;
    }

    p {
      font-size: 14px;
      color: #666;
      margin: 10px 0;
    }

    button {
      width: 200px;
      height: 44px;
      background-color: @bgColor;
      color: #fff;
      border-color: @bgColor;
      border-radius: 15px;

      .star {
        display: inline-block;
        width: 15px;
        height: 15px;
        background-size: cover;
        background-image: url(../../static/images/my/star.png);
      }
    }

    ul {
      width: 100%;
      margin-top: 20px;

      li {
        a {
          display: flex;
          width: 100%;
          text-decoration: none;
          color: #000;
          font-size: 16px;
          justify-content: space-between;
          height: 60px;
          align-items: center;

          img {
            width: 24px;
            margin-right: 10px;
          }

          .icon {
            display: inline-block;
            width: 24px;
            height: 24px;
            background-size: cover;
            background-image: url(../../static/images/i-right.png);
          }
        }
      }
    }
  }
}
</style>